<template>
  <div class="header" >
    <div class="sider center">
      <van-icon v-if="isBack" 
        name="arrow-left" 
        class="back-arrow"
        @click="onBack"
      />
      <slot name="left"></slot>
    </div>
    <div class="content center" @click="clickTitle">
      {{title}}
    </div>
    <div class="sider center">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
      default:''
    },
    isBack:false
  },
  methods:{
    onBack(){
      this.$emit('onBack')
    },
    clickTitle(){
      this.$emit('clickTitle')
    }
  }
}
</script>
<style scoped>
.header{
  height: .45rem;
  display: flex;
  flex-direction: row;
  width: 100%;
  
  background: #3190e8;
  color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.content{
  flex:1;
  height: 100%;
  font-size: .20rem;
  font-weight: 500;
}
.sider{
  min-width: .45rem;
  max-width: 1rem;
  height: 100%;
}
.center{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.back-arrow{
  height: .45rem;
  line-height: .45rem;
  width: .5rem;
  text-align: center;
  font-size: .24rem;
}

</style>